<template>
    <div class="app-container">
        <!-- 筛选表单 -->
        <div>
            <el-form class="zdy-form search-form-new" :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
          <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
                <el-form-item label="游戏" prop="gameId">
                    <el-select v-model="queryParams.gameId" placeholder="请选择游戏" clearable>
                        <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="属性名称" prop="fieldName">
                    <el-input v-model="queryParams.fieldName" placeholder="请输入属性名称" clearable />
                </el-form-item>
                <el-form-item label="状态" prop="auditStatus">
                    <el-select v-model="queryParams.auditStatus" placeholder="请选择状态" clearable>
                        <el-option label="待审核" value="1" />
                        <el-option label="已通过" value="2" />
                        <el-option label="已拒绝" value="3" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>

        </div>
        <!-- 属性列表 -->
        <div class="table_box">
            <el-table v-loading="loading" :data="attributeList" border style="width: 100%">
                <el-table-column prop="tenantId" label="店铺id" />
                 <el-table-column prop="tenantName" label="提交店铺" />
                <el-table-column prop="gameName" label="游戏名称" />
                <el-table-column prop="parentName" label="缺少属性" />
                <el-table-column prop="fieldName" label="属性名称" />
                <el-table-column prop="imgUrl" label="属性图片">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.imgUrl" fit="cover" style="width: 60px; height: 60px"
                            :preview-src-list="[scope.row.imgUrl]" />
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" show-overflow-tooltip />
                <el-table-column prop="createTime" label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.createTime ? $formatDate(scope.row.createTime) : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="审核状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.auditStatus == 1" type="warning">待审核</el-tag>
                        <el-tag v-else-if="scope.row.auditStatus == 2" type="success">已通过</el-tag>
                        <el-tag v-else type="danger">已拒绝</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleReview(scope.row)"
                            :disabled="scope.row.auditStatus != 1">
                            审核
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />


        <!-- 审核弹窗 -->
        <el-dialog title="属性审核" :visible.sync="reviewDialogVisible" width="650px">
            <el-form ref="reviewForm" :model="reviewForm" :rules="reviewRules" label-width="80px">
                <el-form-item label="游戏名称" prop="gameId" >
                    <el-select disabled style="width: 100%;" filterable clearable v-model="reviewForm.gameId"  placeholder="请选择游戏名称"  @change="gameChange">
                        <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="缺少属性" prop="parentId" class="form-item">
                      <el-input disabled v-model="reviewForm.parentName"  />

                    <!-- <el-select style="width: 100%;" filterable clearable v-model="reviewForm.parentId"  placeholder="请选择游戏缺少属性" @change="parentChange">
                        <el-option v-for="dict in gameConfigList" :key="dict.id" :label="dict.fieldName"
                            :value="dict.attributeId" />
                    </el-select> -->
                </el-form-item>
                <el-form-item label="属性名称">
                    <el-input v-model="reviewForm.fieldName"  />
                </el-form-item>
                <el-form-item label="属性图片">
                    <uploadImageOne v-model="reviewForm.imgUrl" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="reviewForm.remark" type="textarea"  />
                </el-form-item>
                <el-form-item label="审核结果" prop="auditStatus">
                    <el-radio-group v-model="reviewForm.auditStatus">
                        <!-- <el-radio :label="1">待审核</el-radio> -->
                        <el-radio :label="2">通过</el-radio>
                        <el-radio :label="3">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- <el-form-item label="拒绝原因" prop="rejectReason" v-if="reviewForm.status === 2">
          <el-input
            v-model="reviewForm.rejectReason"
            type="textarea"
            placeholder="请输入拒绝原因"
            :rows="3"
          />
        </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reviewDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitReview">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import uploadImageOne from "@/components/upload/uploadImageOne.vue";

import attributeReviewApi from '@/api/admin/attributeReview'
// import gameConfigApi from "@/api/gameConfig";

export default {
    name: 'AttributeReview',
    components: {
        uploadImageOne,
        Pagination: () => import('@/components/Pagination/index.vue')
    },
      
    data() {
        return {
            // 遮罩层
            loading: false,
            // 总条数
            total: 0,
            // 游戏选项
            gameOptions: [],
            // 属性列表
            attributeList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                tenantId: '',
                 gameId: '',
                parentName:'',
                auditStatus: '',
            },
            // 审核弹窗显示状态
            reviewDialogVisible: false,
            // 审核表单
            reviewForm: {
                id: null,
                gameName: '',
                attributeName: '',
                attributeImage: '',
                remark: '',
                auditStatus: 2,
                rejectReason: ''
            },
            gameConfigList:[],
            // 审核表单校验规则
            reviewRules: {
                auditStatus: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
            }
        };
    },
    computed: {
        allGameList() {
            return this.$store.getters.allGameList;
        },
         tenantList() {
      return this.$store.getters.tenantList;
    },
    },
    created() {
        this.getList();
    },
    methods: {
        /** 获取属性列表 */
        getList() {
            this.loading = true;
            attributeReviewApi.getList(this.queryParams).then(response => {
                this.attributeList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },

        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.$refs.queryForm.resetFields();
            this.handleQuery();
        },
        handleReview(row) {
            //  this.getGameConfigApi(row.gameId)
            this.reviewForm = JSON.parse(JSON.stringify(row));
            if(row.auditStatus !=1) {
                this.reviewForm.auditStatus = row.auditStatus;
            }else {
                this.reviewForm.auditStatus = 2;
            }
            this.reviewDialogVisible = true;
        },
          gameChange(val) {
            this.reviewForm.gameName = this.allGameList.find(item => item.id === val).name;
            // gameConfigApi.getGameConfigList({ gameId: val }).then(res => {
            //     this.gameConfigList = res.data.configs.filter(item => {
            //         return item.fieldType === 'radio' || item.fieldType === 'checkbox';
            //     });
            // })
        },
        // getGameConfigApi(gameId) {
        //      gameConfigApi.getGameConfigList({ gameId: gameId }).then(res => {
        //         this.gameConfigList = res.data.configs.filter(item => {
        //             return item.fieldType === 'radio' || item.fieldType === 'checkbox';
        //         });
        //     })
        // },
         parentChange(val) {
            this.reviewForm.parentName = this.gameConfigList.find(item => item.attributeId === val).fieldName;
        },
        /** 提交审核 */
        submitReview() {
            this.$refs.reviewForm.validate(valid => {
                if (valid) {
                    attributeReviewApi.process(this.reviewForm).then(response => {
                            this.$modal.msgSuccess('审核成功');
                            this.reviewDialogVisible = false;
                            this.getList();
                    });
                }
            });
        }
    }
};
</script>

<style scoped>
.app-container {
    padding: 20px;
}

.filter-container {
    margin-bottom: 20px;
}

.table-container {
    margin-top: 20px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail{
    object-fit:cover
}
</style>